{% if theme_config.global.product_size == "1" %}
{% assign product_size = "11" %}
{% elsif theme_config.global.product_size == "2" %}
{% assign product_size = "34" %}
{% elsif theme_config.global.product_size == "3" %}
{% assign product_size = "23" %}
{% elsif theme_config.global.product_size == "4" %}
{% assign product_size = "12" %}
{% endif %} 

{%- if product.image.alt == "" -%}
  {% assign product_alt = product | image_alt:'product'  %}
{%- else -%}
  {% assign product_alt = product.image.alt %}
{%- endif -%}


{%- if product.images[1].alt == "" -%}
  {% assign product_alt2 = product | image_alt:'product'  %}
{%- else -%}
  {% assign product_alt2 = product.images[1].alt %}
{%- endif -%}

{%- capture text_ellipsis -%}
  {%- if theme_config.global.product_title_style == 'hide' -%}
    text-ellipsis
  {%- elsif theme_config.global.product_title_style == 'hide2' -%}
    text-ellipsis2
  {%- endif -%}
{%- endcapture -%}

{%- capture product_handle -%}
  {% if product.handle and product.handle != "" %}
    {%- if storeConfig.collection_product_url == 1 -%}
      /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- else -%}
      {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- endif -%}
  {% else %}
    javascript:;
  {%- endif -%}
{%- endcapture -%}

<li class="{{ swiper }}">
    <div class="product_pic {% if theme_config.global.product_move_two %}{% if product.images[1].src %}product_img_hover{% endif %}{% endif %}">
        
        <a class="product_img plugin-product_item-img_box" data-product-id="{{product.id}}" data-scale="{{ product_size }}" href="{{product_handle}}">
            {% include 'lazy_img', class:"default_img", src:product.src,  alt:product_alt %}

            {% if theme_config.global.product_move_two %}
            {% if product.images[1].src %}
            <img class="hover_img" data-sizes="auto" alt="{{product_alt2}}" data-src="{{ product.images[1].src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}">
            {% endif %}
            {% endif %}
        </a>
           
        {% if product.inventory_tracking and product.inventory_policy == 1 %}
        {% if product.inventory_quantity == "0" %}
            <div class="soldout">{{ lang.general.sold_out }}</div>
        {% endif %}
        {% endif %}

        {% if theme_config.global.product_discount_label and product.variant.price > 0 %} 
        {% if product.variant.price < product.variant.compare_at_price %}
        <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">{{ product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor }}% <span>OFF</span></div></div>
        {% endif %}
        {% endif %}



        <div class="product_tag_list">
            {% if theme_config.global.product_preview %}
            <a class="product_view" data-handle="{{ product.handle }}" data-from="{{data_from}}" href="javascript:void(0)">
                <svg t="1645603103455" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1883"><path d="M512 608a96 96 0 1 1 0-192 96 96 0 0 1 0 192m0-256c-88.224 0-160 71.776-160 160s71.776 160 160 160 160-71.776 160-160-71.776-160-160-160" p-id="1884"></path><path d="M512 800c-212.064 0-384-256-384-288s171.936-288 384-288 384 256 384 288-171.936 288-384 288m0-640C265.248 160 64 443.008 64 512c0 68.992 201.248 352 448 352s448-283.008 448-352c0-68.992-201.248-352-448-352" p-id="1885"></path></svg>
            </a>
            {% endif %}
        </div>
    </div>
    <div class="block_product_content">
        <div class="block_product_name {% unless theme_config.global.product_title_model %}wap_hide{% endunless %}">
            <a href="/products/{{ product.handle }}" class="{{ text_ellipsis }}">{{ product.highlight_title | default : product.title }}</a>
        </div>
        <div class="product_price notranslate">
            <span class="general_buying-color">{{ product.variant.price | money }}</span>
          {% if product.variant.compare_at_price != "0" %}
          <span class="product_oldprice general_original-color">{{ product.variant.compare_at_price | money }}</span>
          {% endif %}
        </div>
        {% if theme_config.global.product_discount_label_style_switch and product.variant.price > 0 %} 
        {% if product.variant.price < product.variant.compare_at_price %}
        <div class="product_price" style='color:var(--discount_tag_bg);margin-top: 4px;display: flex;justify-content:center;'>
            {{lang.general.save}}
            {% if theme_config.global.product_discount_label_style == 2 %}
            {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
            <span class="notranslate">{{price}}%</span>
            {% else %}
            {% assign price = product.variant.compare_at_price | minus: product.variant.price | round: 2  %}
            <span class="notranslate">{{price | money}}</span>
            {% endif %}
        </div>
        {% endif %}
        {% endif %}
    </div>

    {% include 'comment_star', score:product.star, style:"margin-top:10px" %}

    {% if theme_config.global.product_img_list_type != 0 %}
    <div class="block_product_img_list noRender">
        <div class="img_list" style="display: flex;justify-content: center;flex-wrap: wrap;">
       {% if theme_config.global.product_img_list_type == "1" %}
        {% assign colorOptions = theme_config.global.product_sku_options | join: ',' | downcase | split: ',' %}
        {% assign isFindSuccess = false %}
        {% if product.variants.size > 0 %}
            {% for option in product.options %}
                {% assign option_name = option.name | downcase %}
                {% assign hasOptionName = option_name | in_array: colorOptions %}
                {% if hasOptionName and isFindSuccess == false %}
                    {% assign isFindSuccess = true %}
                    {% assign optionIndex = option.position | plus: 1 %}
                    {% assign optionTitle = "option" | append: optionIndex | append: "_title" %}
                    {% assign optionValueTitle = "option" | append: optionIndex | append: "_value_title" %}
                    {% assign optionValues = "" %}
                    {% assign isSelectOptions = "" %}
                    
                    {% for optionValueItem in option.values %}
                           {% assign optionValues = optionValues | append: optionValueItem.option_value | append: ',' %}
                    {% endfor %}
                    {% for variant in product.variants %}
                        {% assign varinatTitle = variant | getArrayValueByKey: optionTitle | downcase %}
                        {% assign variantValue = variant | getArrayValueByKey: optionValueTitle | downcase %}
                        {% assign hasVarinatTitle = colorOptions contains varinatTitle %}
                        {% assign hasValue = optionValues contains variantValue %}
                        
                        {% if hasVarinatTitle != '' and  hasValue != '' %}
                            {% unless isSelectOptions contains variantValue %}
                                {% if variant.image %}
                                    {% assign isSelectOptions = isSelectOptions | append: variantValue | append: ',' %}
                                    <a href="{{ product_handle | append: "&variant_sku_code=" | append: variant.sku_code }}" class="img_list_item"><img data-src="{{variant.image.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
                                {% endif %}
                            {% endunless %}
                        {% endif %}
                    {% endfor %}
                    
                {% endif %}
            {% endfor %}
        {% endif %}

       {% elsif theme_config.global.product_img_list_type == "2" %}
        {% if product.variants.size > 0 %}
            {% for imgsItem in product.images %}
                <a href="{{ product_handle }}" class="img_list_item"><img data-src="{{imgsItem.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
            {% endfor %}
        {% endif %}
       {% endif %}
       <div class="morNumber"></div>
       </div>
    </div>
    {% endif %}

  </li>



